<script>
import {
  h,
  getCurrentInstance,
  reactive,
  toRefs,
  defineComponent,
  defineAsyncComponent,
} from "vue";

export default defineComponent({
  props: {
    that: Object,
  },
  components: {
    sort: defineAsyncComponent(() => import("./attrsList/sort.vue")),
    context: defineAsyncComponent(() => import("./attrsList/context.vue")),
    imageUrl: defineAsyncComponent(() => import("./attrsList/imageUrl.vue")),
    width: defineAsyncComponent(() => import("./attrsList/width.vue")),
    height: defineAsyncComponent(() => import("./attrsList/height.vue")),
    seniorBoxSize: defineAsyncComponent(() =>
      import("./attrsList/seniorBoxSize.vue")
    ),
    navMenuList: defineAsyncComponent(() =>
      import("./attrsList/navMenuList.vue")
    ),
    colWidth: defineAsyncComponent(() => import("./attrsList/colWidth.vue")),
    borderRadius: defineAsyncComponent(() =>
      import("./attrsList/borderRadius.vue")
    ),
    opacity: defineAsyncComponent(() => import("./attrsList/opacity.vue")),
    justifyContent: defineAsyncComponent(() =>
      import("./attrsList/justifyContent.vue")
    ),
    carousel: defineAsyncComponent(() => import("./attrsList/carousel.vue")),
    margin: defineAsyncComponent(() => import("./attrsList/margin.vue")),
    padding: defineAsyncComponent(() => import("./attrsList/padding.vue")),
    position: defineAsyncComponent(() => import("./attrsList/position.vue")),
    color: defineAsyncComponent(() => import("./attrsList/color.vue")),
    backgroundColor: defineAsyncComponent(() =>
      import("./attrsList/backgroundColor.vue")
    ),
    border: defineAsyncComponent(() => import("./attrsList/border.vue")),
    boxShadow: defineAsyncComponent(() => import("./attrsList/boxShadow.vue")),
    goto: defineAsyncComponent(() => import("./attrsList/goto.vue")),
    canDelete: defineAsyncComponent(() => import("./attrsList/canDelete.vue")),
  },
  setup(props) {
    let data = reactive({
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      gotoJud: false,
      navMenuCategory: null,
      navMenuJud: false,
      navMenuText: "",
      navMenuSubNum: null,
    });
    return { that: props.that, ...toRefs(data) };
  },
  render() {
    let that = this.that;
    return (
      <div>
        <a-button
          shape="circle"
          onClick={(e) => {
            this.$emit("changeShowAttrsList", false);
            this.$store.commit("changeJudgeColorDom", { e });
          }}
          style={{ margin: "10px" }}
          v-slots={() => <SearchOutlined />}
        ></a-button>
        <div style={{ overflow: "auto" }}>
          {this.$store.state.aimAttrs.sort !== undefined && (
            <sort that={that} />
          )}
          {this.$store.state.aimAttrs.context && <context that={that} />}
          {this.$store.state.aimAttrs.imageUrl && <imageUrl that={that} />}
          {this.$store.state.aimAttrs.width && <width that={that} />}
          {this.$store.state.aimAttrs.height && <height that={that} />}
          {this.$store.state.aimAttrs.seniorBoxSize && (
            <seniorBoxSize that={that} />
          )}
          {this.$store.state.aimAttrs.navMenuList && (
            <navMenuList that={that} />
          )}
          {this.$store.state.aimAttrs.colWidth && <colWidth that={that} />}
          {this.$store.state.aimAttrs.borderRadius && (
            <borderRadius that={that} />
          )}
          {this.$store.state.aimAttrs.opacity && <opacity that={that} />}
          {this.$store.state.aimAttrs.justifyContent && (
            <justifyContent that={that} />
          )}
          {this.$store.state.aimAttrs.carousel && <carousel that={that} />}
          {this.$store.state.aimAttrs.margin && <margin that={that} />}
          {this.$store.state.aimAttrs.padding && <padding that={that} />}
          {this.$store.state.aimAttrs.position && <position that={that} />}
          {this.$store.state.aimAttrs.color && <color that={that} />}
          {this.$store.state.aimAttrs.backgroundColor && (
            <backgroundColor that={that} />
          )}
          {this.$store.state.aimAttrs.border && <border that={that} />}
          {this.$store.state.aimAttrs.boxShadow && <boxShadow that={that} />}
          {this.$store.state.aimAttrs.goto && <goto that={that} />}
          {this.$store.state.aimAttrs.canDelete && <canDelete that={that} />}
        </div>
      </div>
    );
  },
});
</script>

<style lang="less">
.float {
  .styleValue {
    display: flex;
    padding-top: 15px;
    font-size: 14px;
    line-height: 14px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 5px;
    > span {
      margin: 10px;
    }
  }
  div.a-collapse-panel__header {
    font-size: 18px;
  }
}

.seniorBoxSize {
  .seniorBox {
    width: 150px;
    height: 90px;
    display: flex;
    justify-content: space-around;
    color: white;
    margin: auto;
    .seniorBoxItem0 {
      background-color: #3ec1d3;
    }
    .seniorBoxItem0::before {
      content: "0";
    }
    .seniorBoxItem1 {
      background-color: #ff9a00;
    }
    .seniorBoxItem1::before {
      content: "1";
    }
    .seniorBoxItem2 {
      background-color: #ff165d;
    }
    .seniorBoxItem2::before {
      content: "2";
    }
    .seniorBoxItem3 {
      background-color: #94da12;
    }
    .seniorBoxItem3::before {
      content: "3";
    }
    .seniorBoxItem4 {
      background-color: #0070d8;
    }
    .seniorBoxItem4::before {
      content: "4";
    }
  }
}
</style>
